<template>
  <div>
      <el-form :inline="true"  :model="equipmentinfo" class="demo-form-inline">
        <el-form-item label="设备id" prop="id">
          <el-input v-model="equipmentinfo.id" readonly></el-input>
        </el-form-item>
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="equipmentinfo.name" readonly></el-input>
        </el-form-item>
      </el-form>

      <el-form ref="ruleForm" :inline="true" :model="ruleForm" :rules="rules" class="demo-ruleForm">

        <el-form-item label="产品" prop="productid">
          <el-select v-model="ruleForm.productid" placeholder="请选择产品名称" style="width: 205px">
            <el-option v-for="pname in productnames" :label=pname.productname :value=pname.id ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="产品产能" prop="num">
          <el-input  v-model="ruleForm.num" style="width: 200px"></el-input><span>(件/小时)</span>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
          <el-button @click="resetForm('ruleForm')">清空</el-button>
        </el-form-item>

      </el-form>

      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            label="产能信息id"
            prop="id"
            width="150">
        </el-table-column>

        <el-table-column
            label="产品名称"
            prop="productid"
            width="120">
          <template slot-scope="scope">
          <span v-for="productname in productnames" v-show="productname.id == scope.row.productid">
            {{productname.productname}}
          </span>
          </template>
        </el-table-column>

        <el-table-column
            label="产品产能(件/小时)"
            prop="num">
        </el-table-column>

        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">修改
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>

    <el-dialog :visible.sync="dialogVisible" title="修改产能" width="30%">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-form-item label="产品" prop="productid">
          <el-select v-model="form.productid" placeholder="请选择产品名称" style="width: 205px">
            <el-option v-for="pname in productnames" :label=pname.productname :value=pname.id ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="产品产能" prop="num">
          <el-input  v-model="form.num" style="width: 200px"></el-input><span>(件/小时)</span>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="
        dialogVisible = false;
        this.$message({
          message: '修改取消!',
          type: 'warning'
      })"
        >取消</el-button>
        <el-button type="primary" @click="submitUpdate('form')">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData:null,
      productnames:null,
      id:null,
      dialogVisible:false,

      form:{
        id:null,
        productid:null,
        num:null,
        equipmentid:null,
        factoryid:this.$store.state.factoryid
      },
      equipmentinfo:{
        id:null,
        name: null
      },
      ruleForm: {
        productid:null,
        num:null,
        equipmentid:null,
        factoryid:this.$store.state.factoryid
      },
      rules: {
        name: [
          { required: true, message: '产品名不能为空', trigger: 'blur' }
        ],
        productid:[
          { required: true, message: '必须选择一个产品', trigger: 'change' }
        ]
      },
    };
  },created() {
    this.id=this.$route.query.id;
    this.ruleForm.equipmentid=this.id;
    this.form.equipmentid=this.id;
    this.getTableData();
    axios.get('http://localhost:8081/order/getProductname').then(
        (response) => {
          this.productnames = response.data;
        }
    );
    axios.get("http://localhost:8081/equipment/findById/"+this.id).then((response)=>{
      this.equipmentinfo = response.data;
    });
  },
  methods: {
    handleEdit(index, row) {
      this.form.id=row.id;
      this.form.num=row.num;
      this.form.productid=row.productid;
      this.dialogVisible = true;

    },
    handleDelete(index, row) {
      axios.get('http://localhost:8081/capactity/deleteById/' + row.id).then(
          (response) => {
            if(response.data == "success"){
              this.success();
              this.getTableData();
            }else{
              this.failed();
            }
          })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post('http://localhost:8081/capactity/add',this.ruleForm).then((response)=>{
            if(response.data == "success"){
              this.success();
              this.getTableData();
            }else{
              this.failed();
            }
          })
        } else {
          this.failed();
          return false;
        }
      });
    },submitUpdate(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post('http://localhost:8081/capactity/add',this.form).then((response)=>{
            if(response.data == "success"){
              this.success();
              this.dialogVisible = false;
              this.getTableData();
            }else{
              this.failed();
              this.dialogVisible = false;
            }
          })
        } else {
          this.failed();
          this.dialogVisible = false;
          return false;
        }
      });

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getTableData(){
      axios.get("http://localhost:8081/capactity/findAllByEquipmentidAndFactoryid/"+this.id+'/'+this.$store.state.factoryid).then((response)=>{
        this.tableData = response.data;
      });
    },
    success() {
      this.$message({
        message: '操作成功!',
        type: 'success'
      });
    },
    failed() {
      this.$message.error('操作失败，请检查内容是否正确或稍后再试!');
    }
  }
}
</script>